<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" style="height: 100%">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!-- CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/message.css">
    <!-- 表单校验 -->
</head>
<style>
    body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #eee;
        /*display: flex;*/
        /*justify-content: center;*/
        /*flex-direction: column;*/
        height: 100%;
    }
    
    .form-signin {
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }
    
    .form-signin .checkbox {
        font-weight: normal;
    }
    
    .form-signin .form-control {
        position: relative;
        height: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
    }
    
    .form-signin .form-control:focus {
        z-index: 2;
    }
    
    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: 10px;
    }
    
    .container {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

<body>
    <div class="container">
<!--        novalidate-->
        <form  class="form-signin">
            <h2 style="text-align: center" class="form-signin-heading">博客后台系统</h2>
            <label for="inputUsername" class="sr-only">用户名</label>
            <input type="text" name="userName" id="inputUsername" class="form-control" placeholder="用户名" required autofocus>
            <span style="display: none;color: red" class="err err-top40" id="inputUsername_text">用户名错误</span>
            <label for="inputPassword" class="sr-only">密码</label>
            <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
            <span style="display: none;color: red" class="err err-top40" id="inputPassword_text">密码错误</span>
            <th:block th:if="${state == '注册'}">
                <label for="inputMyEmail" class="sr-only">邮箱</label>
                <input type="email" name="email" id="inputMyEmail" class="form-control" placeholder="邮箱" required>
            </th:block>
            <div class="checkbox">
                <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
            </div>
                <th:block th:if="${state == '注册'}">
                    <button type="button" class="btn btn-lg btn-primary btn-block" id="conformbtn1">
                        注册
                    </button>
                </th:block>
                <th:block th:if="${state != '注册'}">
                    <button type="button" id="conformbtn" class="btn btn-lg btn-primary btn-block" >
                        确定
                    </button>
                </th:block>
        </form>
    </div>
    <!-- /container -->
</body>
<!--<script src="/static/js/jquery.js"></script>-->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/tbdValidate.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- 表单校验 -->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>-->
<script src="/static/js/message.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 表单校验
        var regconfig=[
            {eleinput:"inputUsername",eletext:"inputUsername_text",rule:[{reg:/^.+$/,text:"用户名不能为空"},{reg:/^.{5,10}$/,text:"用户名长度为5-10个字"}]},
            {eleinput:"inputPassword",eletext:"inputPassword_text",rule:[{reg:/^.+$/,text:"密码不能为空"}]}
        ];
        // 登录的时候调用这个方法，否则报错（因为id找不到）
        let len1=$("#conformbtn").length;
        let len2=$("#conformbtn1").length;
        if(len1===1){
            tbdValidate(
                regconfig,
                {
                    elesubmit:"conformbtn",//提交按钮
                    funsubmit:function(){//验证通过可提交回调
                        //信息提交接口
                        //处理登录的请求，改用ajax这样的话，可以将cookie存起来
                        $.ajax({
                            url:"/test/userLogin",
                            data:$(".form-signin").serialize(),
                            success:function(result){
                                if(200 === result.code){
                                    $.message({
                                        message:'登录成功',
                                        type:'success',
                                        time:'2000'
                                    });
                                    setTimeout(function () {
                                        self.location.href="/test/index";
                                    },3000)
                                }else {
                                    $.message({
                                        message:'用户名或者密码错误',
                                        type:'error',
                                        time:'2000'
                                    });
                                }
                            }
                        });
                    },
                    funerr:function(){//不可提交回调

                    },
                    funerrlist:function(errlist){
                        $('#'+ errlist[0]).focus();
                    }
                }
            );
        }
        //注册的时候调用
        if(len2===1){
            tbdValidate1(
                regconfig,
                {
                    elesubmit:"conformbtn1",//提交按钮
                    funsubmit:function(){//验证通过可提交回调
                        //信息提交接口
                        $.ajax({
                            url:"/test/doRegister",
                            data:$(".form-signin").serialize(),
                            success:function(result){
                                if(200 === result.code){
                                    $.message({
                                        message:'恭喜你注册成功',
                                        type:'success',
                                        time:'2000'
                                    });
                                    setTimeout(function () {
                                        self.location.href="/test/login";
                                    },3000)
                                }
                            }
                        });
                    },
                    funerr:function(){//不可提交回调

                    },
                    funerrlist:function(errlist){
                        $('#'+ errlist[0]).focus();
                    }
                }
            );
        }
    })


</script>

</html>